<script setup>

import {buyMemberAPI, getMemberAPI} from "../../services/me";
import {onLoad, onPageScroll} from "@dcloudio/uni-app";
import {ref} from "vue";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {BaseImgUrl} from "../../utils/lshttp";
import {usePayHook} from "../../hooks/usePay";

const userInfoStore = useUserInfoStore()
const user = ref()
const memberInfo = ref()
const memberTypeIndex = ref(0)
const isSticky = ref(false)
const showPay = ref(false)
const version_pass = ref(0)
const NewPayType = ref('applet_wechat')

const orderSn = ref('')

const payTypeList = ref([
  {
    name: '微信支付',
    // #ifdef H5
    type: 'wechat',
    // #endif
    // #ifdef APP-PLUS
    type: 'app_wechat',
    // #endif
    // #ifdef MP-WEIXIN
    type: 'applet_wechat'
    // #endif
  },
  // #ifdef APP-PLUS
  {
    name: '支付宝支付',
    // #ifdef APP-PLUS
    type: 'app_alipay',
    // #endif
  },
  // #endif
  {
    name: '余额支付',
    type: 'balance'
  }
])

onPageScroll(e => {
  isSticky.value = e.scrollTop > 480;
})
onLoad(async () => {
  // #ifdef APP-PLUS
  NewPayType.value = 'app_wechat'
  // #endif
  // #ifdef H5
  NewPayType.value = 'wechat'
  // #endif
  user.value = userInfoStore.userInfo
  const res = await getMemberAPI()
  memberInfo.value = res.result
  memberTypeIndex.value = res.result.member_type[0].id
})
// 点击切换会员类型
const handleMemberType = (item) => {
  memberTypeIndex.value = item.id
}
// 支付方式选择
const NewradioChange = (evt) => {
  NewPayType.value = evt.currentTarget.dataset.type
}
// 免费领会员
const mianfeiling = () => {
  uni.navigateTo({
    url: '/pages/member/membertask'
  })
}
// 会员协议
const toXieYi = () => {
  uni.navigateTo({
    url: '/pages/me/xieyimember'
  })
}

// 刷新用户信息
const getUSerInfo = async () => {
  showPay.value = false
  const res = await getMemberAPI()
  memberInfo.value = res.result
  await uni.showToast({
    title: '购买会员成功',
    icon: 'none',
    mask: true,
  })
}
const back = () => {
  uni.navigateBack()
}

// 购买会员
const buyMember = async () => {
  const res = await buyMemberAPI(NewPayType.value, memberTypeIndex.value)
  if (NewPayType.value === "balance") {
    await getUSerInfo()
    return
  }
  const payInfo = res.result
  uni.hideLoading()
  orderSn.value = 'NO12345678900'
  console.log('payInfo--->', payInfo)
  if (NewPayType.value === "app_alipay") {
    await usePayHook().aliPay(payInfo.pay_string, '购买会员', () => {
      getUSerInfo()
    })
    return
  }
  await usePayHook().wxPay(payInfo, '购买会员', () => {
    getUSerInfo()
  })
}

</script>
<template>
  <view class="return_title">
    <u-status-bar></u-status-bar>
    <view class="content">
      <u-icon @click="back" name="arrow-left" color="#333333" size="20"></u-icon>
      <text class="title">我的会员</text>
    </view>
  </view>
  <view class="big_box">
    <view class="top_one" style="padding-top:100rpx">
      <view class="vip_content">
        <view class="head_name">
          <view class="l_head">
            <image :src="user?.avatar"></image>
            <image class="qt_icon" v-if="memberInfo?.is_member === 1"
                   src="https://lsz.lszbg.com/public/uploads/test/qt.png"></image>
          </view>
          <view class="name_time">
            <view class="name">{{ user?.nickname }}</view>
            <view class="time" v-if="memberInfo?.is_member === 1">{{ memberInfo?.member_expiry_time }}到期</view>
            <view class="time" v-else>未开通</view>
          </view>
        </view>
        <view class="js_money">
          <view class="m_text">累计节省</view>
          <view class="m_price">
            <text>{{ memberInfo?.all_money }}</text>
            元
          </view>
        </view>
      </view>
    </view>
    <view class="white_box">
      <view :class="['small_w',memberTypeIndex === item.id ? 'current':'']"
            v-for="(item, index) in memberInfo?.member_type" :key="index" @click="handleMemberType(item)">
        <view style="height: 20rpx"></view>
        <view class="icon">
          <image v-if="index === 0" src="https://lsz.lszbg.com/public/uploads/test/vip2.png"></image>
          <image v-if="index === 1" src="https://lsz.lszbg.com/public/uploads/test/vip2.png"></image>
          <image v-if="index === 2" src="https://lsz.lszbg.com/public/uploads/test/vip2.png"></image>
          <image v-if="index === 3" src="https://lsz.lszbg.com/public/uploads/test/vip2.png"></image>
        </view>
        <view class="text" style="font-size: 26rpx">{{ item.name }}</view>
        <view style="display: flex; align-items: baseline;width: 100%; color: #FC754A;margin:22rpx 0;font-weight: 600;font-size: 26rpx">
          <view style="flex: 1;"></view>
          <view style="font-size: 20rpx">￥</view>
          <view style="">{{ item.price }}</view>
          <view style="flex: 1;"></view>
        </view>
        <view class="y_price">原价￥{{ item.line_price }}</view>
      </view>
    </view>
    <view class="bottom_content">
      <view class="mine_vip">我的会员权益</view>
      <view class="bottom_white">
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon1.png"></image>
          </view>
          <view class="text">超值返利</view>
          <view class="d_text">每单多省
            <text>3</text>
            元
          </view>
        </view>
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon2.png"></image>
          </view>
          <view class="text">极速审核</view>
          <view class="d_text">返利
            <text>秒到账</text>
          </view>
        </view>
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon3.png"></image>
          </view>
          <view class="text">推广特权</view>
          <view class="d_text">邀请获得
            <text>奖励</text>
          </view>
        </view>
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon4.png"></image>
          </view>
          <view class="text">会员客服</view>
          <view class="d_text">
            <text>专属客服</text>
            服务
          </view>
        </view>
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon5.png"></image>
          </view>
          <view class="text">会员日</view>
          <view class="d_text">会员
            <text>专属活动</text>
          </view>
        </view>
        <view class="b_small">
          <view class="icon">
            <image src="https://lsz.lszbg.com/public/uploads/test/icon6.png"></image>
          </view>
          <view class="text">大牌优选</view>
          <view class="d_text">会员享
            <text>大牌</text>
          </view>
        </view>

      </view>
    </view>

    <view>
      <view class="fixed_btns">
        <view class="btn mf_btn" @click="mianfeiling()">免费领会员</view>
        <view class="btn xf_btn" v-if="version_pass === 0" @tap="showPay = true">
          立即{{ memberInfo?.is_member === 1 ? '续费' : '开通' }}
        </view>
        <!--        <navigator url="plugin://fshows-cash-plugin/fs-cash-item">-->
        <!--          付呗开通-->
        <!--        </navigator>-->
        <!--        <fs-cash-item :orderSn="orderSn" :paySucceed="onPaySucceed" :payFail="onPayFail"/>-->
      </view>
      <u-safe-bottom></u-safe-bottom>
    </view>
    <view class="unVip">
      <text v-if="version_pass === 1">暂不支持会员充值</text>
    </view>
    <u-popup :show="showPay" mode="bottom" radius="10" closeable @close="showPay = false">
      <view class="pay_type">选择支付方式</view>
      <view class="popup_content">
        <!-- 后台控制支付方式 -->
        <view class="pay-way">
          <view class="radio-list">
            <view style="display: flex;flex-direction: column;">
              <view class="radio-one">
                <view class="radio-left" @tap="NewradioChange" :data-type="item.type"
                      v-for="(item, index) in payTypeList" :key="index">
                  <image v-if="item.name === '余额支付'" :src="BaseImgUrl + '/images/ye_icon.png'"></image>
                  <image v-if="item.name === '微信支付'" :src="BaseImgUrl + '/images/wx_icon.png'"></image>
                  <image v-if="item.name === '支付宝支付'" :src="BaseImgUrl + '/images/zfb_icon.png'"></image>
                  <view class="radio-int">{{ item.name }}</view>
                  <view class="dianji">
                    <image v-if="NewPayType === item.type" class="check_icon"
                           :src="BaseImgUrl + '/images/select_fill.png'"></image>
                    <image v-else class="check_icon" :src="BaseImgUrl + '/images/select_icon.png'"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="fuwuxieyi" @click="toXieYi()">请仔细阅读《会员协议》</view>
        <button class="submit" @tap="buyMember">
          立即开通
        </button>
      </view>
    </u-popup>
  </view>
</template>
<style>
page {
  background: url('https://lsz.lszbg.com/public/uploads/test/bg.jpg') no-repeat -3rpx 0;
  background-size: cover;
  height: 100%;
  width: 102%;
}
</style>
<style lang="scss" scoped>
.u-status-bar,
.u-navbar__content {
  //background-image: linear-gradient(90deg, #FC5722, #FF7540, #FF7540, #FF7540);
  //background-image: url('https://lsz.lszbg.com/public/uploads/test/bg.jpg');
  background-size: cover;
}

.return_title {
  width: 100%;
  padding: 20rpx 30rpx 16rpx;
  position: fixed;
  color: black;
  z-index: 999;
  top: 0;
  //background: url('https://lsz.lszbg.com/public/uploads/test/bg.jpg');
  background-size: cover;

  .content {
    display: flex;
    align-items: center;
  }

  .title {
    margin-right: 38rpx;
    font-size: 36rpx;
    font-weight: normal;
    flex: 1;
    text-align: center;
  }
}

/* 会员中心 */
.pay_type {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  text-align: center;
  margin-top: 20rpx;
}


.big_box {
  flex: 1;
  //background: url('https://lsz.lszbg.com/public/uploads/test/bg.jpg') no-repeat;
  background-position: top left;
  background-size: cover;
  box-sizing: border-box;
  padding-bottom: 30%;
  padding-top: 100rpx;
  position: relative;

  .top_one {
    width: 93%;
    margin: 0 auto;
    position: relative;
    perspective: 500rpx;

    &:before {
      content: '';
      display: inline-block;
      width: 82%;
      height: 30rpx;
      background-color: #FFC881;
      border-radius: 20rpx;
      position: absolute;
      bottom: -14rpx;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 10;
    }

    &:after {
      content: '';
      display: inline-block;
      width: 100%;
      height: 180rpx;
      position: absolute;
      bottom: -60rpx;
      z-index: 1;
      left: 0;
      background: url('https://lsz.lszbg.com/public/uploads/test/z_bg.png') no-repeat center center / 100% 100%;
    }

    .vip_content {
      width: 76%;
      margin: 0 auto;
      background: url('https://lsz.lszbg.com/public/uploads/test/vip_bg.png') no-repeat center center / 100% 100%;
      box-sizing: border-box;
      padding: 30rpx 20rpx 80rpx 20rpx;
      position: relative;
      z-index: 11;

      .head_name {
        display: flex;
        align-items: center;

        .l_head {
          width: 92rpx;
          height: 92rpx;
          background-color: #fff;
          border-radius: 50%;
          box-sizing: border-box;
          padding: 4rpx;
          margin-right: 20rpx;
          position: relative;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }

          .qt_icon {
            position: absolute;
            right: -10rpx;
            bottom: -10rpx;
            width: 40rpx;
            height: 40rpx;
          }
        }

        .name_time {
          .name {
            font-size: 28rpx;
            color: #fff;
            font-weight: bold;
          }

          .time {
            font-size: 24rpx;
            color: #FFF6E2;
          }
        }
      }

      .js_money {
        margin-top: 40rpx;

        .m_text {
          font-size: 24rpx;
          color: #FFF6E2;
        }

        .m_price {
          font-size: 24rpx;
          color: #FFF6E2;

          text {
            font-size: 32rpx;
            color: #fff;
          }
        }
      }

      &:after {
        content: '';
        display: inline-block;
      }
    }
  }

  .white_box {
    width: 93%;
    background-color: #fff;
    border-radius: 0 0 10rpx 10rpx;
    margin: 60rpx auto 0;
    box-sizing: border-box;
    padding: 30rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .small_w {
      background-color: #F6F6F6;
      border-radius: 10rpx;
      box-sizing: border-box;
      width: 208rpx;
      text-align: center;
      height: 288rpx;
      border: 1px solid #FFFFFF;

      &:last-child {
        margin-right: 0;
      }

      &:first-child .v_m .text1 {
        margin-left: 16rpx;
      }

      &.current {
        border: 1px solid #FF9C5D;
        background-color: #FEF2DA;
        box-shadow: #F3D38C 0 10rpx 10rpx;
        position: relative;

        &:after {
          content: '';
          display: inline-block;
          width: 40rpx;
          height: 40rpx;
          background: url('https://lsz.lszbg.com/public/uploads/test/sj.png') no-repeat center center / 100% 100%;
          position: absolute;
          right: -1px;
          bottom: -1px;
          z-index: 1;
        }

        &:before {
          content: '';
          display: inline-block;
          width: 30rpx;
          height: 30rpx;
          background: url('https://lsz.lszbg.com/public/uploads/test/gou.png') no-repeat center center / 100% 100%;
          position: absolute;
          right: 0;
          bottom: -1px;
          z-index: 11;
        }
      }

      .icon {
        width: 90rpx;
        height: 90rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
      }

      .v_m {
        display: flex;
        align-items: center;
        text-align: center;
        font-size: 26rpx;
        color: #FC754A;
        margin: 16rpx 0;

        //.text1 {
        //  margin-top: 12rpx;
        //  font-size: 26rpx;
        //  text-align: center;
        //}
      }

      .y_price {
        font-size: 22rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
  }

  .bottom_content {
    width: 93%;
    margin: 0 auto;

    .mine_vip {
      font-size: 36rpx;
      color: #333;
      margin: 44rpx 0;
    }

    .bottom_white {
      display: flex;
      flex-wrap: wrap;
      background-color: #fff;
      border-radius: 10rpx;
      justify-content: space-between;
      text-align: center;
      box-sizing: border-box;
      padding-bottom: 60rpx;

      .b_small {
        width: 33%;
        margin-top: 50rpx;

        .icon {
          width: 78rpx;
          height: 78rpx;
          margin: 0 auto;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .text {
          font-size: 28rpx;
          color: #333;
          margin: 10rpx 0;
        }

        .d_text {
          font-size: 24rpx;
          color: #888;

          text {
            color: #FC764A;
          }
        }
      }
    }
  }
}

.fixed_btns {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  width: 100%;
  display: flex;
  justify-content: space-between;

  .btn {
    flex: 1;
    text-align: center;
    height: 88rpx;
    border-radius: 50rpx;
    line-height: 88rpx;
    font-size: 32rpx;

    &.mf_btn {
      border: 1px solid #FC754A;
      color: #F97632;
    }

    &.xf_btn {
      background: linear-gradient(64deg, #FC754A 0%, #FEBC5B 100%);
      color: #fff;
      margin-left: 48rpx;
    }
  }
}


.fuwuxieyi {
  color: #795548;
  padding: 10rpx 0 30rpx 30rpx;
  border-top: #EAEAEA solid 1rpx;
}

.return_img {
  width: 20rpx;
  height: 32rpx;
  margin-right: 20rpx;
}

.imageTop {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.top_title {
  width: 100%;
  display: flex;
  height: 140rpx;
  align-items: center;
  position: relative;
  z-index: 2;
}

.top_title > text {
  width: 100%;
  margin-top: 25rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  font-size: 36rpx;
  color: #fff;
  text-align: center;
}

.top_VIP {
  position: relative;
}

.top_VIP .VIP_bg {
  width: 100%;
  height: 550rpx;
}

.top_VIP .user_box {
  position: absolute;
  top: 180rpx;
  left: 0;
  right: 0;
  margin: auto;
}

.top_VIP .user_box .head_img {
  width: 156rpx;
  height: 156rpx;
  margin: 0 auto 30rpx;
  background-color: rgba(244, 224, 195, 0.5);
  border-radius: 50%;
  box-sizing: border-box;
  padding: 5rpx;
}

.top_VIP .user_box .head_img image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.top_VIP .user_box .username {
  font-size: 28rpx;
  color: rgba(255, 223, 203, 1);
  margin-bottom: 22rpx;
  text-align: center;
}

.top_VIP .user_box .members_text {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  color: rgba(255, 223, 203, 1);
  justify-content: center;
}

.top_VIP .user_box .members_text image {
  width: 44rpx;
  height: 38rpx;
  margin-right: 18rpx;
}

.vip_over_time {
  width: auto;
  display: inline-block;
  padding: 0 30rpx;
  margin: 0 auto;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 24rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #FFDFCB;
  border-radius: 22rpx;
  position: relative;
  left: 50%;
  transform: translate(-50%, 0%);
  top: 20rpx;
}

/* 尊享4大权益 */
.privileged {
  width: 100%;
  height: 120rpx;
  text-align: center;
}

.privileged image {
  width: 472rpx;
  height: 60rpx;
}

.privileged text {
  font-size: 48rpx;
  background: linear-gradient(0deg, #f8c3a5, #fff2e9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  padding: 0 20rpx;
}

/* 权益详细 */
.detailed {
  width: 682rpx;
  background: rgba(28, 24, 21, 1);
  border-radius: 10rpx;
  z-index: 2;
  border: 1px solid rgba(244, 224, 195, 0.5);
  box-sizing: border-box;
  padding: 60rpx 15rpx;
  margin: 0 auto 50rpx;
  border-image: linear-gradient(135deg, rgba(244, 224, 195, 0.5), rgba(30, 25, 21, 1)) 1 1;
}

.detailed .cz_title {
  font-size: 40rpx;
  color: rgba(220, 177, 138, 1);
  text-align: center;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.detailed .zxhy {
  font-size: 26rpx;
  color: rgba(220, 177, 138, 1);
  text-align: center;
  margin-bottom: 60rpx;
}

.detaL {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 20rpx;
  margin-bottom: 60rpx;
}

.detaL view {
  text-align: center;
}

.detaL view .img_box {
  width: 76rpx;
  height: 76rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(202, 161, 122, 0.5);
  border-radius: 50%;
  margin: 0 auto;
}

.detaL view .img_box image {
  width: 36rpx;
  height: 36rpx;
}

.detaL view text {
  display: block;
}

.detaL view text:nth-child(2) {
  font-size: 24rpx;
  color: rgba(220, 177, 138, 1);
  line-height: 40rpx;
  margin: 10rpx 0;
}

.detaL view text:last-child {
  font-size: 22rpx;
  color: rgba(220, 177, 138, .5);
}

/* 立即续费 */
.xf_box {
  width: 574rpx;
  height: 92rpx;
  border-radius: 76rpx;
  margin: 0 auto;
  position: relative;
  display: flex;
}

.xf_box .price_text {
  width: 50%;
  display: inline-block;
  height: 99%;
  font-size: 36rpx;
  color: rgba(220, 177, 138, 1);
  line-height: 92rpx;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
}

.xf_box .xf_btn {
  width: 50%;
  display: inline-block;
  height: 99%;
  font-size: 36rpx;
  color: rgba(79, 38, 0, 1);
  line-height: 92rpx;
  text-align: center;
  position: absolute;
  right: 0;
  top: 0;
}

.xf_box .hy_btn {
  width: 100%;
  height: 100%;
}

.mem_an {
  width: 100%;
  height: 164rpx;
  text-align: center;
  position: relative;
}

.mem_an image {
  width: 627rpx;
  height: 164rpx;
}

.mem_an text:nth-child(2) {
  font-size: 48rpx;
  color: #e7ce9c;
  position: relative;
  bottom: 131rpx;
  right: 44rpx;
}

.mem_an text:last-child {
  font-size: 32rpx;
  color: #fff;
  position: relative;
  bottom: 134rpx;
  left: 85rpx;
}

.unVip {
  text-align: center;
  color: #cdc2be;
  font-size: 24rpx;
  position: relative;
  bottom: -27rpx;
}

.goumaibtn {
  color: #4F2600;
  border-radius: 200rpx;
  padding: 30rpx 10rpx;
  text-align: center;
  width: 88%;
  margin: 40rpx auto 0;
  font-size: 32rpx;
  background: linear-gradient(to right, #FEE2C6, 50%, #F0BA8A);
}

.mianfeilingqu {
  color: #E9C2A4;
  border-radius: 200rpx;
  padding: 30rpx 10rpx;
  text-align: center;
  width: 88%;
  margin: 40rpx auto 0;
  font-size: 32rpx;
  border: 1px solid #E9C2A4;
}

.jiage {
  display: flex;
  align-items: flex-end;
  text-align: center;
  justify-content: center;

  .yuanjia {
    color: #DCB18A;
    margin-right: 40rpx;
    text-decoration: line-through;
    font-size: 34rpx;
    margin-bottom: 14rpx;
  }

  .xianjia {
    color: #DCB18A;
    font-size: 34rpx;

    text {
      color: #DCB18A;
      font-size: 80rpx !important;
      font-weight: bold;
      margin-right: 10rpx;
    }
  }
}

.pay-way {
  margin-top: 20rpx;
  padding: 10rpx 30rpx;
  background-color: #FFFFFF;
  border-radius: 40rpx;
}

.title {
  font-size: 30rpx;
  font-weight: bold;
}

.radio-list {
  background-color: #FFFFFF;
}

.radio-left {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 26rpx 0;
  border-top: #EAEAEA solid 1rpx;
}

.radio-left image {
  width: 58rpx;
  height: 58rpx;
  display: inline-block;
}

.radio-int {
  font-size: 26rpx;
  margin-left: 20rpx;
}

.check_icon {
  width: 34rpx;
  height: 34rpx;
  position: relative;
  top: 0;
  margin-right: 7rpx;
}

.dianji {
  margin-left: auto;

  image {
    width: 38rpx !important;
    height: 38rpx !important;
    opacity: .9;
  }
}

.popup_content {
  box-sizing: border-box;
  padding-bottom: 50rpx;
}

/* 立即开通 */
.submit {
  font-weight: bold;
  width: 100%;
  height: 100rpx;
  background: linear-gradient(to right, rgba(254, 226, 198, 1), rgba(240, 186, 138, 1));
  border-radius: 60rpx;
  font-size: 36rpx;
  color: #64462a;
  line-height: 100rpx;
}

.submit text {
  font-size: 48rpx;
  color: #ff5339;
}
</style>
